<template>
    <div class="box">
        <div class="header">
          <div class="text">外卖 刘乾坤</div>
          <div class="location">
            <van-icon name="location" />
            <span>南职C-201</span>
            <van-icon name="arrow" />
          </div>
        </div>

        <div class="cardDetails">
          <div v-for="i in cart_list" class="card_detail">
                <CartItem :item="i"></CartItem>
            </div>
          </div>
        <div class="result">
          <input type="checkbox" v-model="toggleAll" class="togg"/>
          <div class="total">总价: {{totalPrice}}</div>
          <button class="btn" @click="createOrder">去结算</button>
        </div>
        <Footer />
   </div>
</template>

<script setup lang="ts">
    import CartItem from '@/views/cart/CartItem.vue'
    import Footer from '@/component/footer.vue'
    import { useOrderStore } from '@/Store/OrderStore.ts'
    import { useRouter } from 'vue-router'
    import { reactive,toRefs,computed} from 'vue'

    const data = reactive({
        cart_list: [
            {title:'小炒肉',pic:'',price:12,count:1,checked:false},
            {title:'小炒肉',pic:'',price:12,count:1,checked:true},
            {title:'小炒肉',pic:'',price:12,count:1,checked:false}
        ]
    })

    const { cart_list } = {...toRefs(data)}

    //计算属性
    const totalPrice = computed(()=>{
          return data.cart_list.filter(item=>item.checked==true).reduce((sun, item)=>{
          return sun + item.price * item.count;
          },0)
    });

    //计算未选择的数量
    const count = computed(()=>data.cart_list.filter(item=>!item.checked).length);
 

    //全选
    const toggleAll = computed({
      get(){
          return count.value == 0
      },
      set(state){   //监控复选框状态
        data.cart_list.forEach(item => item.checked = state);
      }
    })


//过滤勾选
    const totalQuantity = computed(()=>{
          return data.cart_list.filter(item=>item.checked).reduce((sun, item)=>{
          return sun + item.count;
          },0)
    });



const names = computed(()=>{
      return cart_list.value.filter(item=>item.checked).map(item=>item.title)
  });

  const orderStore = useOrderStore();
  const router = useRouter();
function createOrder(){
      //生成订单编号:点单编号，商品名称，商品单价，商品总价
      const newOrder = {orderId:Date.now(),price:totalPrice.value,totalcoint:totalQuantity.value,titles:names.value}

      orderStore.addOrder(newOrder)

      //跳转成功页面
      router.push('/order')
}



</script>

<style>
    .header {
      background-image: linear-gradient(#ffc400, #fff);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 5px 40px 5px;
      .text {
        font-size: 12px;
        font-weight: 600;
      }
      .location {
        span {
          margin: 0 5px;
        }
        font-size: 10px;
      }
      .total{
        font-size: 8vw;
      }
  }
  .togg{
            width: 10px;
            height: 10px;
    }
    .result{
      display: flex;
      font-size: 8vw;

    }
    .btn{
      width: 40px;
      height: 18px;
      font-size: 5vw;
    }
    .checkbox{
      font-size: 8vw;
    }

</style>

